//蛇行走的方向
import {Direction} from './types';


/**
 * 蛇的节点
 */
class Node {

  public constructor(
    public index: number = 0,
    public x: number,
    public y: number,

    public size: number = 0,
    public ctx: CanvasRenderingContext2D | null = null,
    public prev: Node | null = null
  ) {
  
  }

  /**
   *
   * @param node 设置前一个节点
   */
  setPrev(node: Node | null) {
    this.prev = node;
  }

  move(){
    if (this.prev) {
      console.log("this.prev.x",this.prev.x);
      
      this.x = this.prev.x;
      this.y = this.prev.y;
    }
  }

  /***
   * 绘制
   */
  public draw() {
    if (this.ctx) {
      if (this.index === 0) {
        //蛇头
        this.ctx.beginPath();
        this.ctx.fillStyle = "#999";
        let arcX = this.x + this.size / 2;
        let arcY = this.y + this.size / 2;
        this.ctx.arc(arcX, arcY, this.size / 2, 0, Math.PI * 2);
        this.ctx.fill();
        this.ctx.closePath();
      } else {
        //蛇的身体
        this.ctx.beginPath();
        let style = `hsl( ${360/(this.size -5) * this.index},80%,50%)`;
        console.log("style",style);
        
        this.ctx.fillStyle = style ;
        this.ctx.fillRect(this.x, this.y, this.size, this.size);
        this.ctx.closePath();
      }
    }
  }
}

/**
 * 蛇类
 */
export default class Snake {
  private nodes: Node[] = [];
  private head: Node | null = null;

  //默认蛇从屏幕左侧进入 向右走
  private direction: Direction = Direction.Right;

  constructor(
    public size: number,
    public blockSize: number = 20,
    public ctx: CanvasRenderingContext2D | null
  ) {
    //初始化蛇的节点
    let lastNode: Node | null = null;
    for (let i = 0; i < this.size; i++) {

      //节点信息 索引，x坐标，y坐标，大小
      let index: number = i;
      let x: number = i=== 0 ? this.blockSize*this.size  : lastNode!.x - this.blockSize ;
      let y: number = this.blockSize;
      let size: number = this.blockSize;

      //基于上述信息创建节点
      let currentNode = new Node(index, x, y, size, this.ctx);
     

      //设置当前节点的上一个节点
      if(lastNode) {
        currentNode.setPrev(lastNode)
      }

      //记录上一个节点
      lastNode = currentNode; 

      //追加到蛇的节点中
      this.nodes.push(currentNode);
    }

  }

  public draw() {
    // console.log("绘制蛇");

    for (let i = 0; i < this.size; i++) {
      // console.log(` 绘制  ${i} 节点`, this.nodes[i]);
      this.nodes[i].draw();
    }
  }


  /**
   *  改变移动方向
   * @param direction 移动方向
   */
  changeDirection(direction: Direction) {
    this.direction = direction;
  }
  public move() {
    // console.log("移动蛇");

   

    //移动蛇身 后一个节点移动到前一个阶段的位置，以此类推
    for (let i = this.size - 1; i>=0  ; i--) {
      this.nodes[i].move()
    }

     //根据方向移动蛇头
     switch (this.direction) {
      case Direction.Up:
        console.log("向上移动");
        this.nodes[0].y -= this.blockSize;
        break;
      case Direction.Down:
        console.log("向下移动");
        this.nodes[0].y += this.blockSize;
        break;
      case Direction.Left:
        console.log("向左移动");
        this.nodes[0].x -= this.blockSize;
        break;
      case Direction.Right:
        console.log("向右移动");
        this.nodes[0].x += this.blockSize;
        break;
    }


    //移动一次之后的蛇的位置
    for (let i = 0; i <=this.size - 1  ; i++) {
      // this.nodes[i].move()
      console.log(`移动一次 this.nodes[ ${i} ]`, this.nodes[i]);
    }
    
   
  }
}
